<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.z {
				width: 59px;
				height: 58px;
				background: url(../images/sprites.png) -182px 0px;
				margin: 50px auto;
			}

			.name {
				width: 1220px;
				margin: 40px auto;
			}

			.name div {
				float: left;
				width: 118px;
				height: 118px;
				background: url(../images/abcd.jpg);
			}

			.name .a {
				background-position: -360px -551px;
			}

			.name .b {
				background-position: -473px -410px;
			}

			.name .c {
				width: 115px;
				height: 118px;
				margin-left: 40px;
				background-position: -251px -553px;
			}

			.name .d {
				width: 65px;
				background-position: -323px -135px;
			}

			.name .f {
				background-position: -369px -269px;
			}

			.name .g {
				margin-left: 40px;
				background-position: -360px -551px;
			}

			.name .i {
				background-position: -369px -269px;
			}
		</style>
	</head>
	<body>
		<h1>精灵图的使用</h1>
		为了有效地减少服务器发送和接收请求的次数，提高页面的加载速度，所以出现了css精灵技术
		<br>
		<h4>精灵技术主要是背景图片的使用,把多个需要使用的小背景图片整合到一张大图片中</h4>
		<h4>这个大图片称为sprites，称为精灵图，雪碧图</h4>
		<h4>使用时，先给一个和背景图标同样大小的盒子，移动背景图片到盒子显示，background-position，注意网页中y坐标正轴向下，往上往左移动是负值</h4>

		<div class="z"></div>

		<div class="name">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
			<div class="d"></div>
			<div class="e"></div>
			<div class="f"></div>
			<div class="g"></div>
			<div class="h"></div>
			<div class="i"></div>
		</div>
	</body>
</html>
